import useTodo from "./useTodo";
import Foo from "./Foo.js"

export default function Todo() {
  let { todoState, todoFn, TodoCtx} = useTodo();

  return (
  <TodoCtx.Provider value={{todoState, todoFn}}>
      <div>
        <h1>{todoState.title}</h1>
        <input type="text" value={todoState.inputStr} onChange={(e) => todoFn.updateInputStr(e)} />
        <button onClick={() => todoFn.addTodo$()}>添加</button>
        <ul>
          {todoState.todoList.map((todo) => (
            <li key={todo.id}>
              <button onClick={() => todoFn.removeTodo$(todo)}>移除</button>
              <span className="content">
              #{todo.id}:  {todo.content} ---{todo.done ? "已完成" : "待做"}
              </span>
              {!todo.done && <button onClick={() => todoFn.setDoneAsync(todo)}>完成</button>}
            </li>
          ))}
        </ul>
        <div> 尚未完成的任务{todoState.unDoneList.length},
         它们是：{todoState.unDoneList.map(t=>"#"+t.id).join(",")}
        </div>
        <Foo/>
      </div>
   </TodoCtx.Provider> 
  );
}
